<template>
<el-container>
  <el-header style="background-color: white;color:black">
      <h1 align="center">题库管理</h1>
  </el-header>
  <el-main>
<!-- 查询条件表单 -->
<el-form  :inline="true" :model="queryForm" class="demo-form-inline">
  <el-form-item label="题目">
    <el-input v-model="queryForm.quContent" placeholder="题目"></el-input>
  </el-form-item>
  <el-form-item label="题型">
    <el-select v-model="queryForm.quType" placeholder="题型">
      <el-option label="单选题" value="单选题"></el-option>
      <el-option label="多选题" value="多选题"></el-option>
      <el-option label="判断题" value="判断题"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="loadData()">查询</el-button>
  </el-form-item>
</el-form>
        <!-- 表格组件-->
        <!-- :data 当前页集合-->
        <el-table :data="list" style="100%">
          <!-- 列组件-->
          <!-- prop 对应当前页集合的对象属性 -->
           <el-table-column prop="quId" label="编号" width="100"></el-table-column>
           <el-table-column prop="quContent" label="题目" width="400"></el-table-column>
           <el-table-column prop="quType" label="题型" width="100"></el-table-column>
           <el-table-column prop="quScore" label="分数" width="100"></el-table-column>
           <el-table-column prop="quAnswer" label="答案" width="100"></el-table-column>
           <el-table-column label="操作" width="200">
             <!-- slot-scope 插槽: 用来获取循环的迭代变量-->
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="update(scope.row,scope.$index)">修改</el-button>
                </template>
           </el-table-column>
        </el-table>

        <!-- 分页组件-->

        <el-pagination
        @size-change="select"
        @current-change="selectPage"
        :current-page="queryForm.page"
        :page-sizes="[10,15,20]"
        :page-size="queryForm.row"
        :total="total"
        layout="sizes,prev,pager,next,jumper,total"
        >
        </el-pagination>

        <!-- 对话框组件-->
        <el-dialog :title="title" :visible.sync="isShow" width="50%">
              <el-form ref="form" :model="formData" label-width="80px">
                <el-form-item label="题目">
                   <input type="hidden" v-model="formData.quId">
                  <el-input v-model="formData.quContent"></el-input>
                </el-form-item>
                <el-form-item label="题型">
                  <el-select v-model="formData.quType" placeholder="请选择题型">
                    <el-option label="单选题" value="单选题"></el-option>
                    <el-option label="多选题" value="多选题"></el-option>
                    <el-option label="判断题" value="判断题"></el-option>
                  </el-select>
                </el-form-item>

               <template v-if="formData.quType!='判断题'">
                <el-form-item label="A选项">
                  <el-input v-model="formData.quAoption"></el-input>
                </el-form-item>
                <el-form-item label="B选项">
                  <el-input v-model="formData.quBoption"></el-input>
                </el-form-item>
                <el-form-item label="C选项">
                  <el-input v-model="formData.quCoption"></el-input>
                </el-form-item>
                <el-form-item label="D选项">
                  <el-input v-model="formData.quDoption"></el-input>
                </el-form-item>
            </template>

                <el-form-item label="答案">
                  <template v-if="formData.quType=='多选题'">
                  <el-checkbox-group v-model="answerList">
                    <el-checkbox label="A" name="type"></el-checkbox>
                    <el-checkbox label="B" name="type"></el-checkbox>
                    <el-checkbox label="C" name="type"></el-checkbox>
                    <el-checkbox label="D" name="type"></el-checkbox>
                  </el-checkbox-group>
                  </template>
                  <template v-else-if="formData.quType=='单选题'">
                  <el-radio-group v-model="formData.quAnswer">
                    <el-radio label="A"></el-radio>
                    <el-radio label="B"></el-radio>
                    <el-radio label="C"></el-radio>
                    <el-radio label="D"></el-radio>
                  </el-radio-group>
                  </template>
                  <template v-else>
                  <el-radio-group v-model="formData.quAnswer">
                    <el-radio label="√"></el-radio>
                    <el-radio label="×"></el-radio>
                  </el-radio-group>
                  </template>
                </el-form-item>
                <el-form-item label="分数">
                  <el-radio-group v-model="formData.quScore">
                    <el-radio label="10"></el-radio>
                    <el-radio label="5"></el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
              </el-form>
        </el-dialog>

  </el-main>
</el-container>

</template>

<script>
    export default {
          name:"question",
          data(){
              return{
                  list:[],//当前页集合
                  totalPage:0,//总页数
                  total:0,//总条数
                  isShow:false,
                  title:"修改",//对话框标题
                  queryForm:{//查询表单
                      page:1,
                      row:10,
                      quContent:"",
                      quType:""
                  },
                  formData:{//增，修改的表单
                      quId:"",
                      quContent:"",
                      quAoption:"",
                      quBoption:"",
                      quCoption:"",
                      quDoption:"",
                      quType:"",
                      quScore:"",
                      quAnswer:"",
                  },
                  answerList:[]//多选题绑定

              }
          },
          methods:{
              loadData(){//加载数据
                var self = this;
                var http =this.$http.get("/question/list",{params:this.queryForm});
                http.then(function(rs){
                    if(rs.data.success){
                          self.list = rs.data.data.list;
                          self.total = rs.data.data.total;
                          self.totalPage = rs.data.data.totalPage;
                    }else{
                      self.list=[];
                      self.total=0;
                    }
                })
              },
              select(row){//分页下拉框选中触发的事件,row是当前选中条数
                  this.queryForm.row = row;
                  //刷新
                  this.loadData();
              },
              selectPage(page){//选中页码触发的事件,page就是选中的页码
                this.queryForm.page = page;
                //刷新
                this.loadData();
              },
              update(x,index){ //修改回显
                console.log(x);
                console.log(index);
                this.isShow = true;
                //数据回显
                this.formData = x;
                //多选题的数据回显
                this.answerList = x.quAnswer.split("");

              },
              onSubmit(){//保存
                  if(this.formData.quType=="多选题"){
                      //清空
                      this.formData.quAnswer="";
                      //赋值多选题的答案
                      for(var i=0;i<this.answerList.length;i++){
                          this.formData.quAnswer+=this.answerList[i];
                      }
                  }

                  console.log(this.formData);
              }
          },
          mounted(){
            this.loadData();
          }
    }
</script>

<style>
</style>
